import React, { useEffect } from 'react';
import * as echarts from 'echarts';
import style from './index.less';
import { timeFormat, tran, calculateFontSize } from '../../util/constants';
import { dataMock } from './mock';
const index = () => {
    const initChart = () => {
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById('main'));
        const startTime = 1679474893000; // 开始时间，时间戳
        // const categories = ['离床', '清醒', '浅睡', '中睡', '深睡'];  // 分类
        // 数据类型的颜色
        // const types = [
        //     { name: '深睡', color: '#FFB665' },
        //     { name: '中睡', color: '#A9F1A6' },
        //     { name: '浅睡', color: '#00E3CA' },
        //     { name: '清醒', color: '#30C0FF' },
        //     { name: '离床', color: '#676EFF' }
        // ];
        const colors = {
            // 'shen': '#FFB665',
            // 'zhong': '#A9F1A6',
            // 'qian': '#00E3CA',
            // 'qing': '#30C0FF',
            // 'li': '#676EFF'
            'shen': '#676EFF',
            'zhong': '#30C0FF',
            'qian': '#00E3CA',
            'qing': '#A9F1A6',
            'li': '#FFB665'
        };
        // 预先计算每个标签的颜色
        // const labels = ['shen', 'zhong', 'qian', 'qing', 'li'];
        const labels = ['li', 'qing', 'qian', 'zhong', 'shen'];
        const labelColors = labels.reduce((acc, label) => {
            acc[label] = {
                backgroundColor: colors[label],
                width: 5,
                height: 5,
                align: 'center',
                verticalAlign: 'middle'
            };
            return acc;
        }, {});
        // 数据机构为：data [{"name": "浅睡","value": [0,1730632107620,1730632111353,3733],"itemStyle": {"normal": {"color": "#00E3CA"}}}]
        const renderItem = (params, api) => {
            // console.log('参数',params)
            // console.log('api',api)
            const categoryIndex = api.value(0);  // y轴上的索引
            // console.log(categoryIndex)
            const start = api.coord([api.value(1), categoryIndex]); // 计算起始点坐标
            // console.log('开始---',start)
            const end = api.coord([api.value(2), categoryIndex]);  // 计算结束点坐标
            // console.log(api.value(2))
            // console.log('结束---',end)
            const height = api.size([0, 1])[1];  // 每个小举行快的高度
            // console.log('高度',height)
            const rectShape = echarts.graphic.clipRectByRect(
                {
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height
                },
                {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                }
            );
            return (
                rectShape && {
                    type: 'rect', // 矩形
                    transition: ['shape'], // 平滑变化
                    shape: rectShape, //  设置矩形的形状
                    style: api.style() //  设置图形的样式
                }
            );
        };

        //  配置项
        const option = {
            // tooltip: {
            //     trigger: 'axis',
            //     formatter: function (params) {
            //         var time = new Date(params[0].value[1]);
            //         return params[0].marker + params[0].name + ': ' + time + ' (' + time/1000/60 + ' 分钟)';
            //     }
            // },
            tooltip: {
                formatter (params) {
                    return `${params.marker + params.name}: ${params.value[3] / 1000 / 60}分钟` + '<br />' + '--开始' + `: ${timeFormat(params.value[1])}<br />` + '--结束' + `: ${timeFormat(params.value[2])}`;
                }
            },
            // title: {
            //     text: 'Profile',
            //     left: 'center'
            // },
            dataZoom: [
                {
                    type: 'slider',
                    filterMode: 'weakFilter',
                    showDataShadow: false,
                    top: 400,
                    labelFormatter: ''
                },
                {
                    type: 'inside',
                    filterMode: 'weakFilter'
                }
            ],
            grid: {
                // height: 300
                left: -15,
                right: 20,
                top: 0,
                bottom: 0,
                containLabel: true
            },
            xAxis: {
                type: 'time',
                min: startTime,
                // min: '2023-03-22 16:48:13', // 设置最小值
                // max: '2023-03-23 04:48:13',  // 设置最大值
                scale: true,
                // axisLabel: {
                //     formatter: function (val) {
                //         return Math.max(0, val - startTime) + ' ms';
                //     }
                // },
                axisLabel: {
                    formatter (value) {
                        // 获取当前刻度对应的时间
                        const date = new Date(value);
                        const hours = date.getHours();
                        const minutes = date.getMinutes();
                        // if (index == 0) {
                        //     // 格式化时间
                        //     return (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes);
                        // }
                        return `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}`;
                    },
                    showMinLabel: true, // 显示最小值标签
                    showMaxLabel: true,  // 显示最大值标签
                    textStyle: { // 设置字体样式
                        fontSize: 11, // 字体大小
                        color: '#999999' // 字体颜色
                    },
                    // rotate: 45, // 旋转标签
                    interval: 0, // 自动调整标签间隔
                    hideOverlap: true // 自动隐藏重叠的标签
                },
                splitLine: {
                    show: false, // 显示分割线
                    interval: Infinity, // 只显示开始和结束的分割线
                    lineStyle: {
                        color: '#ccc', // 分割线颜色
                        type: 'dashed' // 分割线类型
                    }
                }
            },
            yAxis: {
                data: labels,
                inverse: true, // 倒着排序
                axisLine: {
                    show: false // 隐藏 Y 轴的轴线
                },
                axisLabel: {
                    formatter (value) {
                        // const ff = `{${value}|` + '}' + '{' + 'a' + `|${tran(value)}}`;
                        // console.log(ff);
                        return `{${value}|` + '}' + '{' + 'a' + `|${tran(value)}}`;
                    },
                    rich: {
                        ...labelColors,
                        a: {
                            color: '#606364',
                            fontSize: 10,
                            align: 'center',
                            padding: [0, 0, 0, 4],
                            verticalAlign: 'middle'
                        }
                    },
                    margin: 25,    // 刻度标签与刻度线的距离
                    align: 'center' // 刻度标签水平居中对齐
                },
                axisTick: {
                    inside: true,
                    alignWithLabel: true, // 刻度线与刻度标签对齐
                    length: 647,             // 刻度线长度
                    lineStyle: {
                        type: 'dashed', // 虚线
                        color: '#ccc' // 刻度线颜色
                        // z:10000000
                    }
                },
                splitLine: {
                    show: false // 不显示分割线
                    // show: true, // 显示分割线
                    // lineStyle: {
                    //     color: '#000', // 分割线颜色
                    //     type: 'solid', // 分割线类型
                    //     width: 1       // 分割线宽度
                    // }
                }

            },
            series: [
                {
                    type: 'custom',
                    renderItem,
                    itemStyle: {
                        opacity: 1
                    },
                    encode: {
                        x: [1, 2],
                        y: 0
                    },
                    data:dataMock
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    };

    useEffect(() => {
        initChart();
    }, []);

    return (
        <div id='main' className={style.box}></div>
    );
};

export default index;
